<template>
  <div class="slider-area" :style="{ width: width + 'px' }">
    <div
      class="slider-icon"
      :style="{ left: left + 'px' }"
      @mousedown="onMouseDown"
    ></div>
    <div
      class="mask"
      v-if="mouseDown"
      @mousemove="onMouseMove"
      @mouseup="onMouseUp"
    ></div>
    <div
      class="slider-word"
      :class="[
        success ? 'c-w slider-word-content-2' : 'c-d2 slider-word-content-1',
      ]"
    ></div>
    <div
      class="slider-bg"
      :class="[success ? 'slider-bg-success' : 'slider-bg-normal']"
      :style="{ width: bgWidth + 'px' }"
    ></div>
  </div>
</template>

<script>
export default {
  name: "VipSlider",
  props: {
    width: {
      default: 380,
    },
  },
  data() {
    return {
      success: false,
      mouseDown: false, // 是否按下鼠标
      downX: null, // 按下的x轴坐标
      left: 0, //滑块的left属性值
      bgWidth: 0, // 划过背景宽度
      word: "请注意滑块，推动到最右边",
    };
  },
  watch: {
    success: {
      handler(newValue) {
        if (newValue) this.$emit("success");
      },
    },
  },
  methods: {
    onMouseDown(e) {
      e.preventDefault();
      if (this.success) return;
      this.downX = e.clientX;
      this.mouseDown = true;
    },
    onMouseMove(e) {
      e.preventDefault();
      if (!this.downX || this.success) return;
      let moveX = e.clientX - this.downX;
      if (moveX > 0) {
        this.left = moveX;
        this.bgWidth = moveX;
        if (moveX >= this.width - 52) {
          this.left = this.width - 52;
          this.bgWidth = this.width - 52;
          this.success = true;
          this.mouseDown = false;
        }
      } else {
        this.left = 0;
        this.bgWidth = 0;
      }
    },
    onMouseUp() {
      if (this.success) return;
      this.left = 0;
      this.bgWidth = 0;
      this.downX = null;
      this.mouseDown = false;
    },
    reset() {
      this.success = false;
      this.bgWidth = 0;
      this.left = 0;
      this.word = "请注意滑块，推动到最右边";
    },
  },
};
</script>

<style lang="scss" scoped>
.slider-area {
  height: 40px;
  border: #e8e8e8 1px solid;
  background-color: #e8e8e8;
  position: relative;
}
.slider-icon {
  @include size(50px, 38px);
  background-color: #fff;
  @include bg-setting("slider", 15px 16px, center);
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 3;
}
.slider-word {
  @include size(100%, 38px);
  text-align: center;
  line-height: 38px;
  line-height: 38px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transition: color 0.3s;
}
.slider-word-content-1 {
  &::before {
    content: "请注意滑块，推动到最右边";
  }
}
.slider-word-content-2 {
  &::before {
    content: "验证成功";
  }
}
.slider-bg {
  height: 38px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: background-color 0.3s;
}
.slider-bg-normal {
  background-color: rgba($color: #3d3d3d, $alpha: 0.3);
}
.slider-bg-success {
  background-color: #19be6b;
}
.mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 4;
  cursor: pointer;
}
</style>
